<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta charset="utf-8"/>
  <title>教学满意度调查</title>

  <meta name="description" content="overview &amp; stats"/>
  <meta name="keywords" content="华信智原 培训 互联网  计算机 满意度调查"/>
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">


  <script src="${pageContext.request.contextPath }/js/jquery-2.1.0.js"></script>
  <script src="${pageContext.request.contextPath }/bootstrap-3.3.7/js/bootstrap.min.js"></script>
  <script src="${pageContext.request.contextPath }/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
  <script src="${pageContext.request.contextPath}/assets/js/layer-v3.1.0/layer/layer.js"></script>

  <link href="${pageContext.request.contextPath }/bootstrap-3.3.7/css/bootstrap.min.css" type="text/css"
        rel="stylesheet">
  <link href="${pageContext.request.contextPath }/bootstrapvalidator/css/bootstrapValidator.css" type="text/css"
        rel="stylesheet">
  <link href="${pageContext.request.contextPath }/css/common.css" type="text/css" rel="stylesheet">



</head>

<body>

<header class="container-fluid">
  <div class="container" style="background:none">
    <img src="${pageContext.request.contextPath }/images/logo.png"> 欢迎进入教学满意度调查系统，请各位学员选择相应课程、班级、教师并评价。
  </div>
</header>
<form action="" name="scoreAddForm" id="validation-form" method="post">
  <div class="container">
    <div class="row wrap">


        <div class="col-xs-4 col-md-4 form-group">
          <span class="pull-left">科目：</span>

          <select class="form-control pull-left widte" name="courseId">
            <option value="">请选择科目 &emsp;</option>
            <c:forEach items="${courseList}" var="course">
              <option value="${course.id}">${course.coursename}</option>
            </c:forEach>
          </select>

        </div>



        <div class="col-xs-4 col-md-4 form-group">
          <span class="pull-left">班级：</span>

            <select class="form-control pull-left widte" name="classId">
              <option value="">请选择班级 &emsp;</option>
              <c:forEach items="${classList}" var="tclass">
                <option value="${tclass.id}">${tclass.classname}</option>
              </c:forEach>
            </select>

        </div>

        <div class="col-xs-4 col-md-4 form-group">
          <span class="pull-left">教师：</span>

            <select class="form-control pull-left widte" name="teacherId" id="score_pid">
              <option value="">请选择教师 &emsp;</option>
              <c:forEach items="${teacherList}" var="teacher">
                <option value="${teacher.id}">${teacher.teachername}</option>
              </c:forEach>
            </select>

        </div>



    </div>

    <section class="tab">

      <table width="100%" colspacing="0" colspadding="0" id="simple-table"
             class="table table-bordered table-striped">
        <tr>
          <th width="15%">调查项</th>
          <th width="60%">调查项细节</th>
          <th width="25%">满意程度</th>
        </tr>

        <c:forEach items="${bigItems}" var="bigItem">

          <c:forEach items="${bigItem.subItemVOList}" var="subItem">
            <tr>
              <td style="vertical-align: middle">
                  ${bigItem.comment}
              </td>
              <td style="vertical-align: middle;text-align: center">
                  ${subItem.itemName}
              </td>
              <td style="text-align: center;">
                <label>
                  <select class="form-control" name="${bigItem.bigitemName}">
                    <c:forEach items="${subItem.selectValueVOList}" var="selectValue">
                      <option value="${selectValue.selectValue}">${selectValue.selectName}</option>
                    </c:forEach>
                  </select>
                </label>
              </td>
            </tr>
          </c:forEach>
        </c:forEach>


        <tr>
          <td style="vertical-align: middle">对教师的意见：</td>
          <td colspan="2">
            <div class="form-group">
            <textarea class="form-control" name="jy"id="comment_comment"
                        style="resize: none" rows="6" placeholder="输入对教师的建议"></textarea>
            </div>
          </td>
        </tr>


        <tr>
          <td colspan="3" style="text-align: center;">
            <div class="form-group">
              <button type="button" class="btn btn-primary" id="submitbutton">确认提交</button>
            </div>
          </td>


        </tr>

      </table>
    </section>

  </div>
</form>

<script type="text/javascript">
    $(function () {

        var $bvform = $('#validation-form');


        $bvform.bootstrapValidator({
            message: '验证系统出现错误',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                classId: {
                    validators: {
                        notEmpty: {
                            message: '请选择所在班级'
                        }
                    }
                },
                courseId:{
                    validators: {
                        notEmpty: {
                            message: '请选择课程'
                        }
                    }
                },

                teacherId:{
                    validators: {
                        notEmpty: {
                            message: '请选择教师'
                        }
                    }
                },
                jy: {
                    validators: {
                        notEmpty: {
                            message: '请填写对老师的意见和建议'
                        }
                    }
                }

            }

        });


        //ajax提交数据
        $('#submitbutton').click(function () {
            //调用验证
            $bvform.bootstrapValidator('validate');

            if( $bvform.data('bootstrapValidator').isValid() ){
                var $textarea = $('textarea');
                var $select = $('select');

                var params = "";

                //添加select项的参数
                for(var si in $select) {
                    if($select.eq(si).attr('name') != undefined){
                        params = params + '&' + $select.eq(si).attr('name') + '=' + $select.eq(si).val();
                    }

                }

                //添加textarea项的参数
                for (var ti in $textarea ) {
                    if ($textarea.eq(ti).attr('name') != undefined){
                        params = params + '&' + $textarea.eq(ti).attr('name') + '=' + $textarea.eq(ti).val();
                    }
                }


                //layer.msg(params);

                $.ajax({
                    type:'post',
                    url:'${pageContext.request.contextPath }/front/addTeacherResearch.go',
                    data:  params,
                    dataType: 'json',
                    success: function (rep) {
                        layer.msg()
                        if (rep.status== 200){
                            layer.msg(rep.message+'即将关闭该页面',{icon: 1});

                            setTimeout(function () { window.close();  }, 2000);

                        }else if (rep.status == 500) {
                            layer.msg(rep.message,{icon: 6});
                        }
                    },
                    error: function (rep) {
                        layer.msg('未知错误!提交失败');
                    }
                });

            }
        });
    });




    /*进行表格合并*/


    //tbl:table对应的dom元素，
    //beginRow:从第几行开始合并（从0开始），
    //endRow:合并到哪一行，负数表示从底下数几行不合并
    //colIdxes:合并的列下标的数组，如[0,1]表示合并前两列，[0]表示只合并第一列
    function mergeSameCell(tbl, beginRow, endRow, colIdxes) {
        var colIdx = colIdxes[0];
        var newColIdxes = colIdxes.concat();
        newColIdxes.splice(0, 1);
        var delRows = [];
        var rs = tbl.rows;
        //endRow为0的时候合并到最后一行，小于0时表示最后有-endRow行不合并
        if (endRow === 0) {
            endRow = rs.length - 1;
        } else if (endRow < 0) {
            endRow = rs.length - 1 + endRow;
        }
        var rowSpan = 1; //要设置的rowSpan的值
        var rowIdx = beginRow; //要设置rowSpan的cell行下标
        var cellValue; //存储单元格里面的内容
        for (var i = beginRow; i <= endRow + 1; i++) {
            if (i === endRow + 1) {//过了最后一行的时候合并前面的单元格
                if (newColIdxes.length > 0) {
                    mergeSameCell(tbl, rowIdx, endRow, newColIdxes);
                }
                rs[rowIdx].cells[colIdx].rowSpan = rowSpan;
            } else {
                var cell = rs[i].cells[colIdx];
                if (i === beginRow) {//第一行的时候初始化各个参数
                    cellValue = cell.innerHTML;
                    rowSpan = 1;
                    rowIdx = i;
                } else if (cellValue !== cell.innerHTML) {//数据改变合并前面的单元格
                    cellValue = cell.innerHTML;
                    if (newColIdxes.length > 0) {
                        mergeSameCell(tbl, rowIdx, i - 1, newColIdxes);
                    }
                    rs[rowIdx].cells[colIdx].rowSpan = rowSpan;
                    rowSpan = 1;
                    rowIdx = i;
                } else if (cellValue === cell.innerHTML) {//数据和前面的数据重复的时候删除单元格
                    rowSpan++;
                    delRows.push(i);
                }
            }
        }
        for (var j = 0; j < delRows.length; j++) {
            rs[delRows[j]].deleteCell(colIdx);
        }
    }

    mergeSameCell(document.getElementById("simple-table"), 1, -1, [0, 1]);



</script>

</body>
</html>